import createG2 from 'g2-react';
import { Stat } from 'g2';
import React from 'react';
import ReactDOM from 'react-dom';
import { Progress } from 'antd'; //引入进度条
import ajax from '../../../utils/ajax';
import './index.less'; 
import ReportTable from 'components/ReportTables/TodayTable';//引入报表表格
import PieChart from '../../Charts/today/PieChart';//引入饼型图
import LineChart from '../../Charts/today/LineChart';//引入线型图
import CycleChart from '../../Charts/today/CycleChart';//引入活动环型图
import MovieCycleChart from '../../Charts/today/MovieCycleChart';//引入电影环型图
import ImageMange from  '../../SystemManager/ImageManage';

const paramData={};
/**
 * 报表
 */
class TodayChartReport extends React.Component {

  constructor(props) {
    super(props);
    this.initData();
    this.changeProgressBg();
  }

  state = {
     totalData:[],//总预约数据
     nowDay:new Date().format('yyyyMMdd'),//现在时间
     todayPersonNum:0,//今日预约人数
     todayPersonProportion:0,// 今日预约占比
     todayMuseumPersonNum:0,//今日场馆预约人数
     todayMuseumProportion:0,// 今日场馆预约占比
     todayMoviePersonNum:0,//今日电影预约人数
     todayMovieProportion:0,// 今日电影预约占比
     todayActivePersonNum:0,//今日活动预约人数
     todayActiveProportion:0,// 今日活动预约占比
  };

  //初始化请求,得到预约数据
  initData() {
    var self = this;
    paramData.day=this.state.nowDay;
    const url = '/statistic/getMuseumOneDayAppointmentInfo';
    ajax.post({
      url: url,
      async: false,//必须用同步请求，否则数据显示异常
      params:{paramData},
      success: function (res) {
        self.state.totalData=res.data;
        self.state.todayPersonNum=res.data.totalCount;
        self.state.todayPersonProportion=res.data.proportion;
        if(!res.data.closeDay){//说明没有闭馆了
           self.state.todayPersonNum=res.data.subStatistic[0].totalCount;
           self.state.todayPersonProportion=res.data.subStatistic[0].proportion;
           self.state.todayMuseumPersonNum=res.data.subStatistic[1].totalCount;
           self.state.todayMuseumPersonProportion=res.data.subStatistic[1].proportion;
           self.state.todayActiveNum=res.data.subStatistic[2].totalCount;
           self.state.todayActiveProportion=res.data.subStatistic[2].proportion;
        }
      }
    })
  }

  //根据percent值设置进度条背景颜色
  changeProgressBg(){
     //设置总预约
     if(this.state.totalData.proportion<60){//小于60，进度条颜色用橙色表示
       console.log("进度条颜色用橙色");
     }else{
       console.log("进度条颜色使用默认颜色");
     }
  }

  render() {
    return (
      <div>
        <div className="ant-progress-container">
           <div className="ant-progress-total">
                <label className="ant-progress-title">今日预约人数</label>
                <br/>
                <label className="progress-span">{this.state.todayPersonNum}</label>
                <br/><br/><br/><br/>
                <Progress percent={this.state.todayPersonProportion}  format={percent => `${percent}% 占座率`}/>
           </div>
           <div className="ant-progress-room">
                <label className="ant-progress-title">今日场馆预约人数</label>
                <br/>
                <label className="progress-span">{this.state.todayMuseumPersonNum}</label>
                <br/><br/><br/><br/>
                <Progress percent={this.state.todayMuseumPersonProportion} format={percent => `${percent}% 占座率`} />
           </div>
           <div className="ant-progress-movie">
                 <label className="ant-progress-title">今日电影预约人数</label>
                 <br/>
                 <label className="progress-span">{this.state.todayMoviePersonNum}</label>
                 <br/><br/><br/><br/>
                 <Progress percent={this.state.todayMoviePersonProportion} format={percent => `${percent}% 占座率`}/>
           </div>
           <div className="ant-progress-active">
                 <label className="ant-progress-title">今日活动预约人数</label>
                 <br/>
                 <label className="progress-span">{this.state.todayActivePersonNum}</label>
                 <br/><br/><br/><br/>
                 <Progress percent={this.state.todayActivePersonProportion} format={percent => `${percent}% 占座率`}/>
           </div>
        </div>  
        <div className="ant-chart-container">
           <label  className="ant-chart-title">三种预约类型占比</label>
           <PieChart totalData={this.state.totalData}/>
        </div>
        <div className="ant-chart-container">
            <label className="ant-chart-title">近两周预约变化趋势</label>
            <LineChart/>
        </div>
        <div className="ant-chart-today">
        <div className="ant-chart-today-active">
            <label className="ant-chart-title">今日活动预约场次占比</label>
            <CycleChart/>
        </div>
        <div className="ant-chart-today-movie">
            <label className="ant-chart-title">今日电影预约场次占比</label>
            <MovieCycleChart/>
        </div>
        </div>
        <div className="ant-chart-container">
            <label className="ant-chart-title">今日团体预约数据</label>
            <ReportTable/>
        </div>
      </div>
    );
  }

}
export default TodayChartReport;